<html>

<head>
    <title>Attribution Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../css/og.css" type="text/css" />
</head>

<body>
    <div id="globus" style="width:100%;height:100%"></div>
    <button id="viewPoint" style="position: absolute; left:10px; margin:10px;">View point</button>
    <button id="flyPoint" style="position: absolute; left:100px; margin:10px;">Fly point</button>
    <button id="viewExtent" style="position: absolute; left:210px; margin:10px;">View extent</button>
    <script type="module">
        'use strict';

        import { Globe } from '../../src/og/Globe.js';
        import { GlobusTerrain } from '../../src/og/terrain/GlobusTerrain.js';
        import { XYZ } from '../../src/og/layer/XYZ.js';
        import { Extent } from '../../src/og/Extent.js';
        import { LonLat } from '../../src/og/LonLat.js';

        document.getElementById("viewPoint").onclick = function () {
            const DIST = 2000;
            let viewPoi = new LonLat(9.98464, 46.06157, 3039);
            let ell = globus.planet.ellipsoid;
            globus.planet.camera.flyDistance(ell.lonLatToCartesian(viewPoi), DIST);
        };

        document.getElementById("flyPoint").onclick = function () {

            let ell = globus.planet.ellipsoid;

            let destPos = new LonLat(10.13176, 46.18868, 10779);
            let viewPoi = new LonLat(9.98464, 46.06157, 3039);

            let lookCart = ell.lonLatToCartesian(viewPoi);
            let upVec = ell.lonLatToCartesian(destPos).normalize();

            // 0 - is an amplitude of the fly track
            globus.planet.camera.flyLonLat(destPos, lookCart, upVec, 0);
        };

        document.getElementById("viewExtent").onclick = function () {
            globus.planet.flyExtent(new Extent(new LonLat(9.53297, 46.02795), new LonLat(11.56212, 45.78692)));
        };

        let osm = new XYZ("OpenStreetMap", {
            isBaseLayer: true,
            url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            visibility: true,
            attribution: 'Data @ OpenStreetMap contributors, ODbL'
        });

        let globus = new Globe({
            "target": "globus",
            "name": "Earth",
            "terrain": new GlobusTerrain(),
            "layers": [osm]
        });

    </script>
</body>

</html>